<template>
  <div>
    <header>
      电商后台管理系统
      <el-button type="primary" class="exit" @click="exit">退出登陆</el-button>
    </header>
    <el-row>
      <el-col :span="isCollapse ? 2 : 4">
        <!-- :default-active="$route.path" 默认哪个导航是激活的
        $route.path是当前的路由的路径 -->
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
          :collapse="isCollapse"
        >
          <p class="nav-col" @click="isCollapse = !isCollapse">|||</p>
          <el-submenu
            v-for="(item, index) in menuList"
            :key="item.id"
            :index="index + ''"
          >
            <template slot="title">
              <i :class="icons[index]"></i>
              <span>{{ item.authName }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="(subItem, subIndex) in item.children"
                :key="subItem.id"
                :index="'/' + subItem.path"
                @click="addBread(item.authName, subItem.authName)"
              >
                <i class="el-icon-menu"></i>
                <span>{{ subItem.authName }}</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      <!-- 左侧菜单的数据要自己拿 因为不同的权限的用户展示的菜单也是不同 -->
      <el-col :span="isCollapse ? 22 : 20" class="right">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{
            item
          }}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 面包屑导航 -->
        <router-view></router-view>
      </el-col>
      <!-- 右侧页面 -->
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [],
      //左侧菜单
      icons: [
        "el-icon-user-solid",
        "el-icon-s-help",
        "el-icon-s-goods",
        "el-icon-s-order",
        "el-icon-s-platform",
      ],
      //图标
      isCollapse: false,
      //控制导航折叠
      breadList: JSON.parse(localStorage.getItem("bread")) || [],
      //进入页面拿到本地存储里的面包屑数据 实现的刷新数据不掉
    };
  },
  methods: {
    getMenu() {
      this.$axios.get("menus").then((res) => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.menuList = res.data.data;
        }
      });
      // 进入页面拿到数据并且赋值给menuList 这就是菜单数据
    },
    addBread(val1, val2) {
      console.log(val1, val2);
      this.breadList = [val1, val2];
      localStorage.setItem("bread", JSON.stringify(this.breadList));
      //刷新数据不掉 存在本地存储里
    },

    exit() {
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
    //清除登陆状态
  },
  created() {
    this.getMenu();
    //调用获取菜单的方法
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #314b68;
  color: #fff;
  position: relative;
  .exit {
    position: absolute;
    right: 50px;
    top: 5px;
  }
}
.nav-col {
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
}
.el-submenu .el-menu-item {
  min-width: 0px !important;
}
.right {
  padding: 30px 0 0 30px;
  box-sizing: border-box;
}
</style>
